<!--
 * @Author: CHINAKAIYUAN<sunkaiyuan@namenode.cn>
 * @Date: 2022-02-03 14:41:20
 * @LastEditTime: 2023-10-29 14:57:20
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @Description:   :gridOps="gridOptions" other
-->
<template>
  <el-main style="height: 100%">
    <el-row style="height: 100%">
      <el-col :span="14" style="height: 100%;">
        <sc-VxeTable ref="xGrid" :gridEvts="gridEvents" :checkMethod="visibleMethod"
          :tablecode="'pro_process_dyeingInStorage'" :url="api.pro.processes.wip">
        </sc-VxeTable>
      </el-col>
      <el-col :span="10" style="height: 100%;">
        <el-form :model="form" :rules="rules" ref="dialogForm" label-width="70px" label-position="right"
          class="el-tabs--border-card" style="border:1px solid #dedfe0">
          <el-row>
            <el-col :span="8">
              <el-form-item label="派车单" prop="car_id">
                <skAutoChoose v-model="form.car.code" :name="'car'" :assign="form" @select="selectCar">
                </skAutoChoose>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输商" prop="car.company_id">
                <skAutoChoose v-model="form.car.company.name" :name="'factory'" :asKey="'company_id'" :assign="form.car"
                  :params="[{ category_id: 54 }]">
                </skAutoChoose>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运费" prop="car.amount">
                <el-input v-model="form.car.amount" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="搬运单" prop="carry_id">
                <skAutoChoose v-model="form.carry.code" :name="'carry'" :assign="form" @select="selectCarry">
                </skAutoChoose>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="搬运人" prop="carry.company_id">
                <skAutoChoose v-model="form.carry.company.name" :name="'factory'" :asKey="'company_id'" :assign="form.carry"
                  :params="[{ category_id: 55 }]">
                </skAutoChoose>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="搬运费" prop="carry.amount">
                <el-input v-model="form.carry.amount" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="12">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="门市部" prop="ratio">
                    <el-input v-model="form.department.name" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户">
                    <el-input v-model="form.company.name" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="库位">
                    <skAutoChoose v-model="form.location.name" :name="'location'" :assign="form"
                      :params="{ department_id: 33 }">
                    </skAutoChoose>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="正品数" prop="faultle_quantity">
                    <el-input v-model="wip.faultle_quantity" disabled>
                      <template #prepend><span style="width:40px">{{ wip.faultle_auxiliary_quantity }}</span></template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="次品数" prop="rejects_quantity">
                    <el-input v-model="form.rejects_quantity" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="原料包数" prop="material_auxiliary_quantity">
                    <el-input v-model="form.material_auxiliary_quantity" @keyup="computMaterilQtyb" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="原料数量" prop="material_quantity">
                    <el-input v-model="form.material_quantity" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="入库包数" prop="auxiliary_quantity">
                    <el-input v-model="form.auxiliary_quantity" @keyup="computPlanQtyb" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="入库数量" prop="quantity">
                    <el-input v-model="form.quantity" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="品名">
                    <el-input v-model="form.material.name" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="成品形态">
                    <el-input v-model="form.type.name" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="色号">
                    <el-input v-model="form.color.code" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="色名">
                    <el-input v-model="form.color.name" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="缸号">
                    <el-input v-model="form.dyelot" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="批号" prop="lot_name">
                    <el-input v-model="form.lot_name" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" maxlength="120" show-word-limit disabled />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :lg="12">
              <el-form-item label="附件" prop="attachments">
                <sk-upload v-model="form.attachments" :limit="10" draggable tip="上传图片">
                </sk-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" :loading="loading" :disabled="!selected" @click="submit()">保
                  存</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>

    </el-row>
  </el-main>
</template>
<script>
export default {
  name: "pro_process_dyeingInStorage",
};
</script>
<script setup>

import { ref } from "vue";

import { ElNotification } from "element-plus";

import skAutoChoose from "@/components/skAutoChoose";
import { showLoading, hideLoading } from '@/utils/showloading';
import api from "@/api";

const xGrid = ref({});
const dialogForm = ref({});
const loading = ref(false);
const selected = ref(false);
const visibleMethod = ({ row }) => row.process_id == 6;

const form = ref({
  attachments: [],
  company: {},
  department: {},
  material: { spec: "", name: "" },
  type: { name: '色绞' },
  color: {},
  type_id: 5,
  location_id: 89,
  location: { name: "染厂色绞仓库" },
  car: { company: {} },
  carry: { company: {} },
  direction_id: 1
});
const rules = {};

const computPlanQtyb = () => {
  form.value.quantity = form.value.auxiliary_quantity * 25
}
const computMaterilQtyb = () => {
  form.value.material_quantity = form.value.material_auxiliary_quantity * 25;
  form.value.auxiliary_quantity = form.value.material_auxiliary_quantity;
  computPlanQtyb();
}
const selectCarry = (data) => {
  if (typeof data.code == "undefined") {
    data = { company: {} };
  }
  form.value.carry = data;
}
const selectCar = (data) => {
  if (typeof data.code == "undefined") {
    data = { company: {} };
  }
  form.value.car = data;
}
//表单提交方法
const submit = () => {
  dialogForm.value.validate(async (valid) => {
    if (valid) {
      showLoading("保存中！");
      loading.value = true;

      api.pro.processesStorage.save.post(form.value).then((res) => {
        if (res.code == 200) {
          ElNotification({
            title: '成功',
            message: '色绞收货提交成功',
            type: 'success',
          });
          xGrid.value.refresh();
        }
      }).finally(() => {
        hideLoading();
        loading.value = false;
      });

    }
  });
};
const wip = ref({});
const gridEvents = {
  selectData(selectRecords) {
    if (selectRecords.length > 0) {
      // form.value = selectRecords[0];
      wip.value = selectRecords[0];
      let plan = wip.value.pro_plan;
      delete plan.location_id;
      delete plan.plan_id;
      delete plan.order_id;
      delete plan.feeding_ratio;
      delete plan.loom_id;
      delete plan.emergency_id;
      delete plan.dgremark;
      delete plan.pro_quantity;
      delete plan.classgroup_id;
      delete plan.auxiliary_quantity;
      delete plan.faultle_quantity;
      delete plan.plan_auxiliary_quantity;
      delete plan.plan_quantity;

      plan = Object.assign(form.value, plan);
      plan.material_auxiliary_quantity = plan.auxiliary_quantity = wip.value.faultle_auxiliary_quantity ?? wip.value.faultle_quantity / 25;
      plan.material_quantity = plan.quantity = wip.value.faultle_quantity;

      plan.faultle_auxiliary_quantity = wip.value.faultle_auxiliary_quantity;
      selected.value = true;
      plan.material = wip.value.material;
      plan.color = wip.value.color;
      plan.company = wip.value.company;
      plan.wip_id = [wip.value.id];
      plan.process_id = wip.value.process_id;
      plan.id = 0;
    }
    else
      selected.value = false;
  }
};
</script>
